import { useCallback, useRef } from "react";

export default function useChannelScroll() {
    // 用于存储滚动盒子
    const scrollContainerRef = useRef<null | HTMLDivElement>(null);

    // 点击事件处理函数
    const scrollHandler = useCallback(
        (target: HTMLDivElement) => {
            // 获取视图宽度
            const w = window.innerWidth;
            // 设置横向滚动距离
            scrollContainerRef.current!.scrollTo({
                // 横向滚动距离 = 用户点击的一级分类盒子的中心点与滚动盒子起始位置的距离 - (视图宽度 - 右侧视图宽度) / 2
                left: target.offsetLeft + target.offsetWidth / 2 - (w - w * 0.2373) / 2,
                // 滚动行为: smooth 表示平滑滚动
                behavior: "smooth",
            });
        },
        [scrollContainerRef]
    );

    return { scrollHandler, scrollContainerRef };
}